/**
 * Created by mac on 2017/7/7.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    ScrollView,
    Image,
    FlatList,
    TouchableOpacity,
    DeviceEventEmitter
} from 'react-native';

import {CachedImage} from "react-native-img-cache";

let width = Dimensions.get('window').width;


let data = require('./data.json').data.recommendChannel;
let productsData = data.floors[0].products;

import SectionBar from './SectionBar';

export default class Products extends Component {


    render() {

        console.log(productsData);
        return (
            <View>
                <SectionBar title={data.titles.promotions}/>
                <FlatList contentContainerStyle={{justifyContent:'space-between',backgroundColor:'#eeeeee'}}
                          numColumns={2}
                          data={productsData}
                          renderItem={({item,index}) =>{

                              let pic = '';
                              if (item.tags.length>0){
                                  pic =item.tags[0].pic;
                              }

                              return (
                                  <View style={{paddingLeft:index%2?5:0,paddingBottom:5}}>
                                    <CachedImage
                                        style={{width: (width - 5) / 2, height: (width - 5) / 2}}
                                               source={{uri: item.pic}}/>
                                    <CachedImage style={{width:50,height:50,position:'absolute',left:index%2?7:2,top:2}} source={{uri:pic}}/>
                                    <View style={{paddingLeft:5,paddingTop:5,backgroundColor:'white',width: (width - 5) / 2}}>
                                        <Text>{item.alias}</Text>
                                        <Text  numberOfLines={1} style={{fontSize:12,color:'gray',paddingTop:5}}>{item.name}</Text>
                                        <Text style={{color:'red',flexDirection:'row',paddingTop:5}}>
                                            {item.salesPrice.toFixed(2)+'  '}
                                            <Text style={{paddingBottom:0,fontSize:10, textDecorationLine:'line-through',color:'gray'}}>{item.marketPrice.toFixed(2)}</Text>
                                        </Text>
                                    </View>
                                    <TouchableOpacity onPress={(e)=>{

                                        console.log('onpress='+e.nativeEvent.pageX);
                                        console.log('onpress='+e.nativeEvent.pageY);
                                        console.log('onpress='+e.nativeEvent.locationX);
                                        console.log('onpress='+e.nativeEvent.locationY);

                                        let point = {
                                            x:e.nativeEvent.pageX-e.nativeEvent.locationX,
                                            y:e.nativeEvent.pageY-e.nativeEvent.locationY
                                        }

                                       setTimeout(()=>this.props.clickCart(point),0);




                                       // DeviceEventEmitter.emit('ClickCart',point);


                                    }} style={{position:'absolute',bottom:10,right:10}}>
                                        <Image source={require('./images/icon-add-to-cart-green.png')} style={{width:37*0.7,height:33*0.7}}/>
                                    </TouchableOpacity>
                                  </View>
                              )
                          }}
                />
            </View>
        )
    }
}